
* {
  padding: 0;
  margin: 0;
  list-style: none;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #4070f4;
  transition: 1s;
}

.shell {
  width: 700px;
  height: 900px;
  background-color: #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}

.shell-top {
  width: 100%;
  height: 80%;
  border-bottom: 1px solid rgba(223, 223, 223);
  overflow-x: hidden;
}

.shell-top ul {
  width: 300%;
  height: 100%;
  display: flex;
  position: relative;
  transition: 0.3s;
  left: 0;
}

.shell-top ul li {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.shell-top ul li img {
  width: 150px;
}

.shell-top ul li .box-1 {
  width: 70%; /* 确保所有的 box 宽度一致 */
  min-height: 50px; /* 调整高度以适应文本 */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1px; /* 调整每个 box 之间的底部间隔 */
  border-radius: 10px;
  color: #4070f4;
  font-family: "Brush Script MT", cursive;
  font-size: 25px;
  text-align: justify; /* 两端对齐 */
  text-indent: 2em; /* 首行缩进 */
}
.shell-bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 28%;
}

.shell-bottom li {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: grayscale(0.5);
}

.shell-bottom li img {
  width: 100px;
}
.shell-bottom-1 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 2%;
}
.shell-bottom-1 li {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: grayscale(0.5);
  color: #4070f4; /* 粉色文字 */
  font-family: "Brush Script MT", cursive; /* 使用艺术字体 */
  font-size: 20px; /* 字体大小 */
  margin: 0; /* 移除默认的边距 */
  text-indent: -10px;
  font-size: 24px;
  margin-top: -55px;
}